<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
    <title>助店吧</title>
    <link href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/weui.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/kanjia.css">
</head>
<body>
<!-- 顶部导航 -->
    <div class="top_banner">
        <ul class="weui-navbar">
            <li data-id="1" class="active weui-navbar__item weui-bar__item__on" data-query="#choiceness">
                <img class="init_img" src="./images/icon/1.png" alt="">
                <img class="sel_img" src="./images/icon/11.png" alt="">
                精选
            </li>
            <li data-id="2" class="weui-navbar__item" data-query="#type">
                <img class="init_img" src="./images/icon/2.png" alt="">
                <img class="sel_img" src="./images/icon/22.png" alt="">
                按类型分
            </li>
            <li data-id="3" class="weui-navbar__item" data-query="#work">
                <img class="init_img" src="./images/icon/3.png" alt="">
                <img class="sel_img" src="./images/icon/33.png" alt="">
                按行业分
            </li>
            <li data-id="4" class="weui-navbar__item" data-query="#fest">
                <img class="init_img" src="./images/icon/4.png" alt="">
                <img class="sel_img" src="./images/icon/44.png" alt="">
                按节日分
            </li>
            <li data-id="5" class="weui-navbar__item" data-query="#brand">
                <img class="init_img" src="./images/icon/5.png" alt="">
                <img class="sel_img" src="./images/icon/55.png" alt="">
                按品牌分 
            </li>
        </ul>
    </div>
<!-- 顶部导航 -->
<!-- 内容 -->
    <div class="content">
    <!-- 标签区域 -->
        <div class="mark">
            <ul id="choiceness">
                
            </ul>
            <!-- 类型 -->
            <ul class="mark_area clearfix" id="type">
                <li data-id="1">季节</li>
                <li data-id="2">转介绍</li>
                <li data-id="3">砍价</li>
                <li data-id="4">投票</li>
                <li data-id="5">抽奖</li>
                <li data-id="6">秒杀</li>
                <li data-id="7">支付</li>
                <li data-id="8">拼团</li>
                <li data-id="9">助力</li>
                <li data-id="10">报名</li>
            </ul>
            <!-- 类型 -->
            <!-- 行业 -->
            <ul class="mark_area clearfix" id="work">
                <li data-id="1">教育培训</li>
                <li data-id="2">母婴行业</li>
                <li data-id="3">生活服务</li>
                <li data-id="4">眼镜</li>
                <li data-id="5">丽人美容</li>
                <li data-id="6">餐饮美食</li>
                <li data-id="7">黄金珠宝</li>
                <li data-id="8">运动健身</li>
            </ul>
            <!-- 行业 -->
            <!-- 节日 -->
            <ul class="mark_area clearfix" id="fest">
                <li data-id="1">双十一</li>
                <li data-id="2">国庆节</li>
                <li data-id="3">中秋节</li>
                <li data-id="4">教师节</li>
                <li data-id="5">七夕</li>
                <li data-id="6">世界杯</li>
                <li data-id="7">618</li>
                <li data-id="8">端午节</li>
                <li data-id="9">父亲节</li>
                <li data-id="10">儿童节</li>
                <li data-id="11">母亲节</li>
                <li data-id="12">劳动节</li>
                <li data-id="13">元宵节</li>
                <li data-id="14">春节</li>
                <li data-id="15">新年</li>
                <li data-id="16">情人节</li>
            </ul>
            <!-- 节日 -->
            <!-- 品牌 -->
            <ul class="mark_area clearfix" id="brand">
                <li data-id="1">乐高</li>
                <li data-id="2">花王纸尿裤</li>
                <li data-id="3">学酷101</li>
                <li data-id="4">于斯教育</li>
                <li data-id="5">常昊围棋</li>
                <li data-id="6">海拍客</li>
            </ul>
            <!-- 品牌 -->
        </div>
    <!-- 标签区域 -->
    <!-- 主要内容 -->
        <div class="main">
            <!-- 侧导航 -->
            <ul class="main_nav">
                <li data-id="1" class="active">金银首饰</li>
                <li data-id="2">教育培训</li>
                <li data-id="3">餐饮美食</li>
                <li data-id="4">美容美发</li>
                <li data-id="5">节日专享</li>
                <li data-id="6">运动健身</li>
                <li data-id="7">其他行业</li>
            </ul>
            <!-- 侧导航 -->
            <!-- 活动区域 -->
            <div class="main_con">
                <ul class="tools">
                    <li class="tool" >
                        <div class="grid tool-info">
                            <div class="cell-5">
                                <a><img class="img-responsive" src="./images/yuandan.jpg" /></a>
                            </div>
                            <div class="cell-7">
                                <h5 class="tool-name">
                                    疯狂砍价
                                </h5>
                                <p class="tool-desc">双12全民砍价</p>
                            </div>
                        </div>
                        <div class="foot_btn">
                            <button class="example">查看示例</button>
                            <button class="make">马上制作</button>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 活动区域 -->
        </div>
    <!-- 主要内容 -->
    </div>
<!-- 内容 -->
<!-- 底部导航 -->
    <div class="weui-tabbar">
        <a href="javascript:;" class="weui-tabbar__item active">
            <img class="black_img" src="./images/icon/6.png" alt="">
            <img class="yellow_img" src="./images/icon/66.png" alt="">
            <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img class="black_img" src="./images/icon/7.png" alt="">
            <img class="yellow_img" src="./images/icon/77.png" alt="">
            <p class="weui-tabbar__label">活动</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img class="black_img" src="./images/icon/8.png" alt="">
            <img class="yellow_img" src="./images/icon/88.png" alt="">
            <p class="weui-tabbar__label">投票</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img class="black_img" src="./images/icon/9.png" alt="">
            <img class="yellow_img" src="./images/icon/99.png" alt="">
            <p class="weui-tabbar__label">商城</p>
        </a>
    </div>
<!-- 底部导航 -->
    <script src="./js/require.min.js"></script>
    <script>
        var url = {
            activeList: "./activeList.json"
        }

        require.config({
            baseUrl: '.',
            paths: {
                'jquery': 'https://cdn.bootcss.com/jquery/2.2.4/jquery.min',
                'jquery-weui': 'https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min',
                'weuijs': 'https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min',
                'bootstrap': 'https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min'
            },
            shim: {
                'jquery-weui': {
                    deps: ['jquery']
                },
                'weuijs': {
                    exports: 'weuijs',
                    deps: ['jquery']
                },
                'bootstrap': {
                    deps: ['jquery']
                }
            },
            proiority: ['jquery']
        });
        // 显示标签
        require(['jquery', 'weuijs', 'jquery-weui'], function($, weui) {
            var top_id;
            var mark_id;
            var work_id;
            var loading;
            // 顶部导航
            $('.weui-navbar__item').on('click', function() {
                if(mark_id == $(this).data('id')) {
                    return false;
                }
                top_id = $(this).data('id');
                var controlSelector = $(this).data('query');
                $(this).addClass('active').siblings().removeClass('active');
                $(controlSelector).toggle().siblings().hide();
                var vis = $(controlSelector).is(':visible');
                if(vis) {
                    var mark_height = $(controlSelector).innerHeight();
                    $('.main').css('padding-top', mark_height + 'px');
                }else {
                    $('.main').css('padding-top', 0);
                }
            });
            // 标签区
            $('.mark_area').find('li').on('click', function() {
                if(mark_id == $(this).data('id')) {
                    return false;
                }
                $(this).addClass('active').siblings().removeClass('active');
                mark_id = $(this).data('id');
                getActiveList();
            });
            // 侧导航
            $('.main_nav').find('li').on('click', function() {
                if(work_id == $(this).data('id')) {
                    return false;
                }
                $(this).addClass('active').siblings().removeClass('active');
                work_id = $(this).data('id');
                getActiveList();
            });
            function getActiveList() {
                // 显示加载中
                loading = weui.loading('加载中');
                // 请求数据列表
                $.post(url.activeList, {
                    top_id: top_id,
                    mark_id: mark_id,
                    work_id: work_id
                }).then(function(res) {
                    console.log(res);
                    var data = res.data;
                    // 将原列表替换成新列表
                    var template = '\
                    <li class="tool" >\
                        <div class="grid tool-info" style="margin-left: 0;">\
                            <div class="cell-5">\
                                <a><img class="img-responsive" src="{{cover}}" /></a>\
                            </div>\
                            <div class="cell-7">\
                                <h5 class="tool-name">\
                                    {{title}}\
                                </h5>\
                                <p class="tool-desc">{{sub}}</p>\
                            </div>\
                        </div>\
                        <div class="foot_btn">\
                            <button class="example">查看示例</button>\
                            <button class="make">马上制作</button>\
                        </div>\
                    </li>\
                    ';
                    var s = '';
                    for(i in data) {
                        s += template.replace(/{{cover}}/g, data[i].cover)
                                     .replace(/{{title}}/g, data[i].title)
                                     .replace(/{{sub}}/g, data[i].sub)
                    }
                    $('.tools').empty();
                    $('.tools').html(s);
                    // 关闭加载中
                    loading && loading.hide();
                }).fail(function(e) {
                    console.log(e);
                    alert('请求失败');
                    // 关闭加载中
                    loading && loading.hide();
                });
                

                
            }
        });
        // 底部导航
        require(['jquery'], function($) {
            $('.weui-tabbar__item').on('click', function() {
                $(this).addClass('active').siblings().removeClass('active');
            });
        });
    </script>
</body>
</html>